<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> 
<META HTTP-EQUIV="Expires" CONTENT="0"> 
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<link rel="stylesheet" href="css/jquery.jqplot.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.js"></script>
<script type="text/javascript" src="js/jqplot.canvasAxisTickRenderer.js"></script>
<script type="text/javascript" src="js/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="js/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="js/jqplot.categoryAxisRenderer.js"></script>

<title>Insert title here</title>
</head>
<script type="text/javascript">
	$(document).ready(function(){
		line1 = [4, 12, 2, 3];
	    line2 = [4, 12, 2, 3];
	    line3 =[4, 12, 2, 3];
	    plot3 = $.jqplot('chart3', [line1, line2, line3], {
	         stackSeries: true,
	         legend: {
	             show: true,
	             location: 'se'
	         },
	         title: 'Unit Sales: Acme Decoy Division',
	         seriesDefaults: {
	             renderer: $.jqplot.BarRenderer,
	             rendererOptions: {
	                 barDirection: 'horizontal',
	                 barWidth:10
	             }
	         },
	         series: [{
	             label: '命中'
	         },
	         {
	             label: '未命中'
	         },
	         {
	             label: '持平'
	         }],
	         axes: {
	             yaxis: {
	                 renderer: $.jqplot.CategoryAxisRenderer
	             }
	         }
	     });
	    $('#chart3').bind('jqplotDataClick', 
	            function (ev, seriesIndex, pointIndex, data, radius) {    
	                var color = 'rgb(50%,50%,100%)';
	                $('#tooltip1b').css({left:20, top:20});
	                $('#tooltip1b').html('<span style="font-size:14px;font-weight:bold;color:'+color+';">詳細資訊</span><br />'+'資訊: '+data[0]+'<br />');
	                $('#tooltip1b').show();
	            });
	});
</script>
<body>
<div style="position:absolute;z-index:99;display:none;" id="tooltip1b"></div> 
<div id="chart3" style="margin-top:20px; margin-left:5px; width:1024px; height:768px;"></div> 
</body>
</html>